<template>

	<view class="ripple-height">
		<view class="title">
			<text class="titleValue">{{value}}</text>
			<text>{{valueUnit}}</text>
		</view>

		<text class="des">{{valueDes}}</text>

	</view>

</template>
<script>
	export default {
		name: "ripple",
		data() {
			return {}
		},
		props: {
			value: {
				type: Number,
        default: ''
			},
			valueUnit: {
				type: String,
				default: '%LEL'
			},
			valueDes: {
				type: String,
				default: '低报'
			}
		},
		methods: {}
	}
</script>

<style scoped>
	.titleValue {
		font-size: 60rpx;
		margin-left: 24rpx;
		color: #fff;
		;
	}

	.des {
		font-size: 30rpx;
		color: #fff;
		;
	}

	.ripple-height {
		color: #fff;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;

    border-radius: 80rpx;
    width: 160rpx;
    height: 160rpx;
		margin: 60rpx auto;
		animation: ripple-red 0.6s linear infinite;
		background-color: #f1a25d;
	}


	@keyframes ripple-red {
		0% {
			box-shadow: 0 0 0 0 rgba(241, 162, 93, 1),
			 0 0 0 20rpx rgba(241, 162, 93, 1),
			  0 0 0 40rpx rgba(241, 162, 93, 1), 
			  0 0 0 60rpx rgba(241, 162, 93, 1);
		}

		100% {
			box-shadow: 0 0 0 20rpx rgba(241, 162, 93, 1), 
			 0 0 0 40rpx rgba(241, 162, 93, 1),
			 0 0 0 60rpx rgba(241, 162, 93, 1), 
			 0 0 0 80rpx rgba(241, 162, 93, 0);
		}
	}
</style>